昨天了解了Websocket是甚麼，那今天我們就來實際操作websocket吧

WebSocket流程

Websocket的流程給他劃成四個階段

1. 建立Websocket Server
2. 回應碼與屬性，用於觀察Websocket的連接狀態

• 0 (CONNECTING): 正在建立連接。
• 1 (OPEN): 連接已經建立並且可以進行通信。
• 2 (CLOSING): 連接正在關閉。
• 3 (CLOSED): 連接已關閉或無法建立。
• bufferedAmount:這個屬性表示還在隊列中等待傳輸到網絡的字節數。

3. 使用方法Methods

• send(data):用於向伺服器發送數據。
• close([code, reason]):用於關閉 WebSocket 連接。可以選擇性地傳遞一個 code 和 reason 來說明為何關閉連接。

4. 事件Event

• open:這個事件在 WebSocket 連接成功建立時觸發。可以在這裡初始化數據或發送初始消息。
• message:當伺服器發送數據到客戶端時，這個事件會觸發，並且接收到的數據可以通過 event.data 獲取。
• error:當連接發生錯誤時觸發。
• close:當 WebSocket 連接關閉時觸發，可以在這裡清理資源或嘗試重連。

建立WebSocket Sever

Node.js中有一個WS套件就是用來實現Websocket sever的，所以首先我們先安裝好Node.js

然後安裝
npm install ws

接下來開始建立server.js

const WebSocket = require("ws");
//創建websocket服務器接口8080
const wss = new WebSocket.Server({ port: 8080 });

wss.on("connection", function (ws) {
    console.log("client 連接成功");
    //處理接受到的消息
    ws.on("message", function (message) {
        console.log("接收到客戶端消息：" + message);

        ws.send("服務端回復：" + message);
    });

    ws.on("close", function () {
        console.log("client 關閉連接");
    });

    ws.on("error", function (err) {
        console.log("client 連接出錯：" + err);
    });

    ws.send("歡迎來到websocket服務器");
});

console.log("websocket服務器port->ws://localhost:8080");

然後運行伺服器 node server.js

接下來觀察程式碼，從上可以看出Websocket的三項Event，那有沒有好奇怎麼少了open?
原因是後端無法直接觸發 open 事件，因為後端並不建立連接，而是等待客戶端連接。後端使用 connection 事件來處理新的連接請求。所以後端是無法觸發open事件的。

前端連接

既然開好了server那就用前端簡單連一下吧
建個index.html跟index.js，html的部分就單純引入js即可

const ws = new WebSocket('ws://localhost:8080');

// 連接成功時觸發
ws.onopen = () => {
  console.log('Connected to WebSocket server');
  ws.send('Hello Server!');
};

// 接收到消息時觸發
ws.onmessage = (event) => {
  console.log('Received from server:', event.data);
};

// 連接關閉時觸發
ws.onclose = () => {
  console.log('Disconnected from WebSocket server');
};

// 連接出錯時觸發
ws.onerror = (error) => {
  console.error('WebSocket error:', error);
};

不過這裡沒做甚麼事比較容易觀察到的就是開啟跟關閉，至於為甚麼後端會有message是因為前端send的關係唷

下篇則會好好的觀察下Websocket的運作